<template>
    <div class="components_edit_modal">
        <el-dialog width="80%" :title="title" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-row> 班级列表 </el-row>
            <el-row style="margin-left: 10px;">
                <el-col :span="20">
                    <template>
                        <el-checkbox-group v-model="checkedClass">
                            <el-checkbox v-for="(item,index) in classList" :ref="'checkbox'+item.id" :label="item.id" :key="item.id" :disabled="item.isDisabled">{{item.shortName}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-col>
            </el-row>
            <el-row style="margin-left: 10px;">
                <div style="margin-bottom: 10px;">
                    <el-button type="primary" size="mini" ref="alignment"   @click="clickAlignment">合堂</el-button>
                    <el-button type="primary" size="mini" ref="noAlignment" @click="clickNoAlignment">不合堂</el-button>
                </div>
            </el-row>
            <el-row :gutter="20" class="syllabus_box">
                <!-- 合堂处理项目时****开始 -->
                <template v-show="alignmentList.classSyllabus.length > 0">
                    <el-col v-for="(item,index) in alignmentList.classSyllabus" :key="item.index">

                        <el-card class="box-card">
                            <a href="javascript:void(0);" class="card-delect" @click="cardDelect(index,item,'alignmentList')"><i class="el-dialog__close el-icon el-icon-close"></i></a>
                            <!-- 合堂处理 -->
                            <h2>
                                {{showClassList(item.classNameList)}}
                            </h2>
                            <div class="components_searchs">
                                <span class="tit" style="width: 100px;">添加新的时间段：</span>
                                <!-- <el-input  placeholder="请选择周次" v-model="item.teachWeek" disabled></el-input>
                                <el-button type="primary" @click="showWeekSelector(item,'alignmentList',index)"  size="mini">选择教学周</el-button> -->
                                <el-button type="primary" @click="addSyllabus(item,'alignmentList')"  size="mini">添加时间段</el-button>
                            </div>
                                <!-- {{item}} -->
                            <div>
                                <!-- 表格编辑**开始 -->
                                <div class="scrollBarX">
                                    <el-table :data="item.syllabusList"  border stripe style="width: 100%" class="components_edit_tables">
                                        <el-table-column label="选择教学周" align="center" width="100">
                                            <template slot-scope="scope">
                                                <el-button type="primary" @click="showWeekSelector(item.syllabusList[scope.$index],'alignmentList',index)"  size="mini">选择</el-button>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="已选教学周" align="center" prop="teachWeek" :show-overflow-tooltip="true"></el-table-column>
                                        <el-table-column label="星期" align="center" width="100">
                                            <template slot-scope="scope">
                                                <el-select v-model="item.syllabusList[scope.$index].week" size="mini" placeholder="请选择">
                                                    <el-option
                                                      v-for="item in options.week"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="节次" align="center">
                                            <template slot-scope="scope">
                                                <el-select v-model="item.syllabusList[scope.$index].section" size="mini" multiple  placeholder="请选择">
                                                    <el-option
                                                      v-for="item in options.section"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column  prop="address" label="授课地点" align="center">
                                            <template slot-scope="scope">
                                                <el-input size="mini" v-model="item.syllabusList[scope.$index].teachPlace"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column  prop="address" label="操作" align="center" width="80">
                                            <template slot-scope="scope">
                                                <a href="javascript:void(0);" class="link_txt" @click="delectSyllabus(scope.$index,item)">删除</a>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <!-- 表格编辑**结束 -->
                            </div>
                        </el-card>
                    </el-col>
                </template>
                <!-- 合堂处理项目时****结束 -->
                <!-- 不合堂处理项目时****开始 -->
                <template v-show="noAlignmentList.classSyllabus.length > 0">
                    <el-col v-for="(item,index) in noAlignmentList.classSyllabus" :key="item.index">
                        <el-card class="box-card">
                            <a href="javascript:void(0);" class="card-delect" @click="cardDelect(index,item,'noAlignmentList')"><i class="el-dialog__close el-icon el-icon-close"></i></a>
                            <!-- 不合堂处理 -->
                            <h2>
                                {{showClassList(item.classNameList)}}
                            </h2>
                            <div class="components_searchs">
                                <span class="tit" style="width: 100px;">添加新的时间段：</span>
                                <!-- <el-input  placeholder="请选择周次" v-model="item.teachWeek" disabled></el-input>
                                <el-button type="primary" @click="showWeekSelector(item,'noAlignmentList',index)"  size="mini">选择教学周</el-button> -->
                                <el-button type="primary" @click="addSyllabus(item,'noAlignmentList')"  size="mini">添加时间段</el-button>
                            </div>
                            <div>
                                <!-- 表格编辑**开始 -->
                            <div class="scrollBarX">
                                <el-table :data="item.syllabusList"  border stripe style="width: 100%" class="components_edit_tables">
                                    <el-table-column label="选择教学周" align="center" width="100">
                                        <template slot-scope="scope">
                                            <el-button type="primary" @click="showWeekSelector(item.syllabusList[scope.$index],'noAlignmentList',index)"  size="mini">选择</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="已选教学周" align="center" prop="teachWeek" :show-overflow-tooltip="true"></el-table-column>
                                    <el-table-column label="星期" align="center" width="100">
                                        <template slot-scope="scope">
                                            <el-select v-model="item.syllabusList[scope.$index].week" size="mini" placeholder="请选择">
                                                <el-option
                                                  v-for="item in options.week"
                                                  :key="item.value"
                                                  :label="item.label"
                                                  :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="节次" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="item.syllabusList[scope.$index].section" size="mini" multiple  placeholder="请选择">
                                                <el-option
                                                  v-for="item in options.section"
                                                  :key="item.value"
                                                  :label="item.label"
                                                  :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column  prop="address" label="授课地点" align="center">
                                        <template slot-scope="scope">
                                            <el-input size="mini" v-model="item.syllabusList[scope.$index].teachPlace"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column  prop="address" label="操作" align="center" width="80">
                                        <template slot-scope="scope">
                                            <a href="javascript:void(0);" class="link_txt" @click="delectSyllabus(scope.$index,item)">删除</a>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                                <!-- 表格编辑**结束 -->
                            </div>
                        </el-card>
                    </el-col>
                </template>
                <!-- 不合堂处理项目时****结束 -->
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary"
                @click="submitSyllabus"
                v-loading.fullscreen.lock="fullscreenLoading"
                size="small">确 定</el-button>
                <el-button @click="closeDialog" size="small">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 周次选择 -->
        <week-selector
            :datas="weekPassList"
            ref="weekSelector"/>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import {config} from '@/config'
    import week_selector from "../../../common/week-selector"
    export default {
        components: {
            "week-selector":week_selector
        },
        data() {
            return {
                flag: true,
                state: false,
                mode:null,
                fullscreenLoading:false,
                title:'',
                checkAll: false,
                classList:[],         // 班级列表
                checkedClass: [],     // 已选择的班级
                isAlignment:'',       //是否合堂处理，必须选择
                classSyllabusItem:{},
                currentSyllabusList:null,
                alignmentList:{
                    classId:[],
                    heTangFlag:[],
                    classSyllabus:[
                /*        {
                            classId:null,       // 班级id
                            teachWeek:[],     // 教学周
                            syllabusList:[
                                {week:'',section:'',teachPlace:''}   // 周几，节次，地点
                            ]
                        }*/
                    ]
                },      // 合堂处理的班级列表
                noAlignmentList:{
                    classId:[],       // 班级id
                    classSyllabus:[]
                },    // 不合堂处理的班级列表
                professionId:'',      // 专业id
                baseId:'',
                grade:'',
                weekList:[],          // 请求的数据
                weekPassList:[],      // 传递给周期控件的值
                syllabusList:[],
                options: {
                    week:[{
                          value: '1',
                          label: '周一'
                        }, {
                          value: '2',
                          label: '周二'
                        }, {
                          value: '3',
                          label: '周三'
                        }, {
                          value: '4',
                          label: '周四'
                        }, {
                          value: '5',
                          label: '周五'
                        }, {
                          value: '6',
                          label: '周六'
                        }, {
                          value: '7',
                          label: '周日'
                        }],
                    section:[{
                            value: '1',
                            label: '第一节'
                        },{
                            value: '2',
                            label: '第二节'
                        },{
                            value: '3',
                            label: '第三节'
                        },{
                            value: '4',
                            label: '第四节'
                        },{
                            value: '5',
                            label: '第五节'
                        },{
                            value: '6',
                            label: '第六节'
                        },{
                            value: '7',
                            label: '第七节'
                        },{
                            value: '8',
                            label: '第八节'
                        },{
                            value: '9',
                            label: '第九节'
                        },{
                            value: '10',
                            label: '第十节'
                        }]
                }
            };
        },
        created() {
        },
        mounted() {},
        watch: {
            alignmentList:{

                handler (val, oldVal) {
                    let self = this;
                    // console.log(val, oldVal)
                    _.forEach(val.classSyllabus,function(item){
                        let itemDeep =  _.cloneDeep(item.syllabusList)
                        _.forEach(itemDeep,function(syllabusItem){
                            // 深度比较
                            let num = _.filter(itemDeep, _.matches({ 'section': syllabusItem.section, 'week': syllabusItem.week, 'teachWeek': syllabusItem.teachWeek}));
                            if(num.length > 1){
                               return self.flag = false;
                            }else{
                               return self.flag = true;
                            }
                        })
                    })
                },
    　　　　    deep: true
            },
            noAlignmentList:{

                handler (val, oldVal) {
                    let self = this;
                    // console.log(val, oldVal)
                    _.forEach(val.classSyllabus,function(item){
                        let itemDeep =  _.cloneDeep(item.syllabusList)
                        _.forEach(itemDeep,function(syllabusItem){
                            // 深度比较
                            let num = _.filter(itemDeep, _.matches({ 'section': syllabusItem.section, 'week': syllabusItem.week, 'teachWeek': syllabusItem.teachWeek}));
                            if(num.length > 1){
                               return self.flag = false;
                            }else{
                               return self.flag = true;
                            }
                        })
                    })
                },
    　　　　    deep: true
            },
        },
        methods: {
            // 打开模态框
            showDialog(val){
                //清空数据
                this.alignmentList = {
                    classId:[],
                    heTangFlag:[],
                    classSyllabus:[]
                }
                this.noAlignmentList = {
                    classId:[],       // 班级id
                    classSyllabus:[]
                };
                this.checkedClass = [];
                // 接受传值
                this.professionId = val.professionId;
                this.baseId = val.id;
                this.grade = val.grade;
                this.title =  val.professionName +" - "+ val.courseName;

                this.getWeekList();
                this.getSyllabus();
            },
            closeDialog(){
                this.alignmentList = {};
                this.noAlignmentList = {};
                this.checkedClass = [];
                this.classList = [];
                this.state = false;
                // this.$emit('refreshList');
            },
            //获取需要修改的课程表信息
            /*getSyllabusDetail(){
                var self = this;
                self.axios({
                    method: "get",
                    url: api.syllabusManager.getDetail,
                    params: {
                        "baseId": self.baseId
                    }
                }).then((response)=>{
                        if(response.data.success){
                            console.log(response.data);
                            console.log(response.data);
                        }else{
                            self.$message.error(response.data.msg);
                        }
                    })
            },*/
            //请求教学周 初始数据
            getWeekList(){
                let self = this;
                self.axios.get(api.syllabusManager.queryTeachWeek+self.baseId).then((response) => {
                    if(response.data.success){
                        if(response.data.data.length > 0){
                            self.weekList = JSON.parse(JSON.stringify(response.data.data));
                            self.state = true;
                        }else{
                            // 操作失败
                            this.$message({
                                message: "该专业还未配置教学周，请重新选择！",
                                type:'error',
                                center: true
                            });
                        }
                    }else{
                        // 操作失败
                        self.$message({
                            message: response.data.msg,
                            type:'error',
                            center: true
                        });
                    }

                });
            },
            //获取课程表数据
            getSyllabus(){
                var self = this;
                self.axios({
                    method: "get",
                    url: api.schoolClass.queryAllByCondition,
                    params: {
                        "professionId": self.professionId,
                        "grade": self.grade,
                    }
                }).then((response)=>{
                        if(response.data.success){
                            if(response.data.data){
                                self.classList = JSON.parse(JSON.stringify(response.data.data));
                                for (var i = 0; i < self.classList.length; i++) {
                                    self.$set(self.classList[i], 'isDisabled', false);
                                };
                            }else{
                                self.$message.error("还没有班级选择该专业！");
                            }

                        }else{
                            self.$message.error(response.data.msg);
                        }
                    })
            },
            //整理数据，打开 选择周弹窗
            showWeekSelector(val,mode,index){
                let self = this;
                // 记录当前存在的对象
                this.classSyllabusItem = val;
                this.mode = mode;
                if(mode == "alignmentList"){
                    self.currentSyllabusList = self.alignmentList.classSyllabus[index].syllabusList;
                }else if(mode == "noAlignmentList"){
                    self.currentSyllabusList = self.noAlignmentList.classSyllabus[index].syllabusList;
                }

                let weekList = self.weekList
                let weekSelecttList = this.parseStringToInt(val.teachWeek.split(","));
                let lineCount =weekList.length/7;

                if(weekList.length % 7 >0){
                    lineCount += 1;
                }
                let weekCurrentList=[];

                for(let i=0;i<lineCount;i++){
                    let weekItem=[];
                    for(let j=1;j<=7;j++){
                        if(7*i+j<=weekList.length){
                            let bool_temp = false;
                            //判断传过去的值回显问题
                            for(let num=0;num<weekSelecttList.length;num++){
                                if(weekSelecttList[num] == weekList[7*i+j-1].week){
                                    bool_temp = true;
                                }
                            }

                            weekItem.push({
                                id:weekList[7*i+j-1].id,
                                teachWeek:weekList[7*i+j-1].week,
                                select:bool_temp
                            });
                        }
                    }
                    weekCurrentList.push(weekItem);
                }
                this.weekPassList = weekCurrentList;
                this.$refs.weekSelector.showDialog();
            },
            putSelectWeekList(params){
                // console.log("params");
                // console.log(params);
                let weekShowLine =[];
                let weekCurrentList = params.data;
                let self = this;
                for(let i=0;i<weekCurrentList.length;i++){
                    weekShowLine.push(weekCurrentList[i].teachWeek);
                }
                // this.classSyllabusItem = weekShowLine.join(",");
               /* if(self.mode == "alignmentList"){
                    _.forEach(self.currentSyllabusList,function(item){
                        item.teachWeek = weekShowLine.join(",")
                    })
                }else if(self.mode == "noAlignmentList"){
                    _.forEach(self.currentSyllabusList,function(item){
                        item.teachWeek = weekShowLine.join(",")
                    })
                }*/

                this.classSyllabusItem.teachWeek = weekShowLine.join(",");
                // console.log(this.classSyllabusItem);
                // 生成初始时间端
                // this.addSyllabus(this.classSyllabusItem);
            },
            parseStringToInt(arr){
                let arrInt = [];
                for(let i=0;i<arr.length;i++){
                    arrInt.push(parseInt(arr[i]));
                }
                return arrInt;
            },
            // 格式化班级数据(","后添加空格，需删除两位)
            showClassList(classList){
                let str = "";
                for (var i = 0; i < classList.length; i++) {
                    str = str + classList[i].shortName + ", "
                };
                str = str.slice(0,str.length-2);
                return str
            },
            // 添加时间段
            addSyllabus(item,type){
                let num = null;

                num = item.syllabusList.length;

                this.classSyllabusItem = item;

                if(num > 0){
                    item = _.cloneDeep(item.syllabusList[num-1]);
                }else{
                    var item = {
                        week:[],
                        baseId:this.baseId,
                        section:"",
                        teachPlace:'',
                        classId: item.classId.join(','),
                        classIds: item.classId.join(','),
                        heTangFlag: item.classId.join(','),
                        teachWeek: item.teachWeek
                    };
                }

                this.classSyllabusItem.syllabusList.push(item);
            },
            // 点击合堂处理
            clickAlignment(){
                var self = this;
                /*console.log("self.checkedClass");
                console.log(self.checkedClass);*/
                if(self.checkedClass.length > 0 && self.checkedClass.length <= self.classList.length){  // 确定用户已选择班级
                    //  查找合堂的数据  arr为新增加的班级id
                    let arr = _.difference(self.checkedClass, self.alignmentList.classId, self.noAlignmentList.classId);

                    if(arr.length > 1){
                        this.isAlignment = true;
                        //禁用已选择的班级
                        for (var i = 0; i < self.checkedClass.length; i++) {
                            var num = _.findIndex(self.classList,function(item){
                                 return item.id == self.checkedClass[i]
                            });
                            self.classList[num].isDisabled = true;
                        };
                        self.alignmentList.classId =  _.concat(self.alignmentList.classId,arr);
                        self.alignmentList.classId =  _.remove(self.alignmentList.classId, function(n) {
                            return n != undefined;
                        });

                        let item = {};
                        let nameArr = [];
                        item.classId = arr ;      // 班级id
                        item.classNameList = [] ;      // 班级id
                        item.teachWeek = "" ;    // 教学周
                        item.syllabusList = [];
                        item.heTangFlag = arr;
                        // 查找班级名字
                        _.forEach(arr, function(value) {
                            let itemClassName = _.find(self.classList, function(o) { return o.id == value; });
                            item.classNameList.push(itemClassName);

                        });

                        self.alignmentList.classSyllabus.push(item);

                    }else{
                        self.$message.error("合堂处理，请最少选择两个班！");
                    }

                }else{
                    self.$message.error("请选择班级");
                }
            },
            // 不合堂处理
            clickNoAlignment(){
                var self = this;
                if(self.checkedClass.length > 0){  // 确定用户已选择班级
                    //  查找不合堂的数据  arr为新增加的班级id
                    let arr = _.difference(self.checkedClass, self.alignmentList.classId, self.noAlignmentList.classId);
                    if(arr.length > 0){
                        this.isAlignment = false;
                        for (var j = 0; j< arr.length; j++) {
                            //禁用已选择的班级
                            for (var i = 0; i < self.checkedClass.length; i++) {
                                var num = _.findIndex(self.classList,function(item){
                                     return item.id == self.checkedClass[i]
                                });
                                if(num != -1){
                                    self.classList[num].isDisabled = true;
                                }
                            };

                            self.noAlignmentList.classId =  _.concat(self.noAlignmentList.classId,arr[j]);
                            self.noAlignmentList.classId =  _.remove(self.noAlignmentList.classId, function(n) {
                                return n != undefined;
                            });

                            let item = {};
                            item.classId = [];
                            item.classId.push(arr[j]);      // 班级id
                            item.classNameList = [] ;      // 班级id
                            item.teachWeek = "" ;    // 教学周
                            item.syllabusList = [];
                            // 查找班级名字
                            _.forEach(item.classId, function(value) {
                                let itemClassName = _.find(self.classList, function(o) { return o.id == value; });
                                item.classNameList.push(itemClassName);

                            });

                            self.noAlignmentList.classSyllabus.push(item)
                        };

                    }else{
                        self.$message.error("请选择班级");
                    }
                }else{
                    self.$message.error("请选择班级");
                }
            },
            //删除添加的时间段
            delectSyllabus(val,item){
                let num = val;
                item.syllabusList.splice(num,1)
            },
            //删除某项配置
            cardDelect(val,alignmenTitem,item){

                let deletItem = [];
                if(item == "alignmentList"){
                    deletItem = this.alignmentList.classSyllabus.splice(val,1);
                }else if(item == "noAlignmentList"){
                    deletItem = this.noAlignmentList.classSyllabus.splice(val,1);
                }

                //解除按钮的禁用
                //禁用已选择的班级
                for (var i = 0; i < deletItem[0].classId.length; i++) {
                    var num = _.findIndex(this.classList,function(item){
                         return item.id == deletItem[0].classId[i]
                    });
                    var num2 = _.findIndex(this.checkedClass,function(item){
                         return item == deletItem[0].classId[i]
                    });

                    this.checkedClass.splice(num2,1);
                    alignmenTitem.classNameList.splice(num2,1);

                    this.classList[num].isDisabled = false;
                };
                this.alignmentList.classId = _.intersection(this.checkedClass,this.alignmentList.classId);
                this.noAlignmentList.classId = _.intersection(this.checkedClass,this.noAlignmentList.classId);
            },
            changeSelect(changeType,item,module) {
                let itemDeep =  _.cloneDeep(item)
                _.forEach(itemDeep,function(syllabusItem){
                    // 深度比较
                    let num = _.filter(itemDeep, _.matches({ 'section': syllabusItem.section, 'week': syllabusItem.week}));
                    if(num > 1){
                        this.flag = false;
                    }

                })
            },
            // 数据处理
            formatData(data){
                if(data){
                    let arr = [];
                    for(let h = 0; h < data.length; h++){ // 合堂多少次
                        let classArr = data[h].classId;
                        let syllabusList = data[h].syllabusList;
                        for(let i = 0; i < classArr.length; i++){ // 几个班级合堂
                            let cloneSyllabusList = _.cloneDeep(syllabusList)
                            for (let j = 0; j < cloneSyllabusList.length; j++) {   //课程表
                                cloneSyllabusList[j].classId = classArr[i];
                                cloneSyllabusList[j].heTangFlag = classArr.join(',');
                                cloneSyllabusList[j].section = cloneSyllabusList[j].section;
                                arr.push(cloneSyllabusList[j]);
                            }
                        }
                    }
                    return arr;
                }
            },
            // 数据处理
            formatNoAlignmentList(data){
                if(data){
                    let arr = [];
                    for(var i = 0; i < data.length; i++){
                        arr = _.union(data[i].syllabusList,arr);
                    }
                    return arr
                }
            },
            // 点击提交数据
            submitSyllabus(){
                let self = this;
                // 整理需要提交的数据
                let alignmentList = this.formatData(this.alignmentList.classSyllabus);
                let noAlignmentList = this.formatNoAlignmentList(this.noAlignmentList.classSyllabus);

                let submitData =  _.union(alignmentList,noAlignmentList);
                // 判断周次、教学地点、节次皆不能为空
                let num = _.find(submitData,function(item){
                    if(item.section.length == 0){
                        return item;
                    }else if(item.teachPlace == ""){
                        return item;
                    }else if(item.week == ""){
                        return item;
                    }
                });
                // 提交数据不能为空
                if(self.flag){
                    if(submitData.length > 0){
                        // 周次、教学地点、节次皆不能为空
                        if(!num){
                            self.fullscreenLoading = true;
                            self.axios.post(api.syllabusManager.syllabusInsert, submitData)
                            .then((response) => {
                                if (response.data.success) {
                                    self.$message({
                                        type: 'success',
                                        message: response.data.msg,
                                    });
                                    self.$emit('refreshList');
                                    self.state = false;
                                } else {
                                    self.$message.error(response.data.msg);
                                }
                                self.fullscreenLoading = false;
                            })
                        }else{
                            self.$message.error("星期、节次、授课地点都为必填项！");
                        }
                    }else{
                        self.$message.error("还未配置课程表，无法提交！");
                    }
                }else{
                    self.$message.error("课程表有重复项，不可提交");
                }
            }
        },
        computed: {}

    };
</script>
<style scoped>
    .el-input__inner{height:20px;}
    .address{height:25px;}
    .el-textarea__inner{width:100%;height:100%;}
    .components_edit_modal .el-table__body-wrapper td{padding:5px;}
    .el-row{margin-bottom:20px;}
    .el-col-11{min-width:519px;border-radius:4px;}
    .bg-purple-dark{background:#99a9bf;}
    .bg-purple{background:#d3dce6;}
    .bg-purple-light{background:#e5e9f2;}
    .grid-content{min-height:36px;border-radius:4px;}
    .row-bg{padding:10px 0;background-color:#f9fafc;}
    .box-card{position:relative;}
    .card-delect{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:#00bbbd;color:#FFF;text-align:center;line-height:30px;}
    .el-card{overflow:inherit;}
    .components_edit_modal .el-form-item{width:100%;}
    .components_edit_modal .el-form-item__content{padding-right:0;width:100%;}
</style>